<%@page import="at.ac.tuwien.big.we14.lab2.api.PlayersStatus.Status"%>
<%@page import="at.ac.tuwien.big.we14.lab2.api.Game"%>
<jsp:useBean id="question" class="at.ac.tuwien.big.we14.lab2.api.impl.SimpleQuestion" scope="session"/>
<jsp:useBean id="playerstatus" class="at.ac.tuwien.big.we14.lab2.api.impl.SimplePlayersStatus" scope="session"/>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Business Informatics Group Quiz</title>
        <link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/style/screen.css" />
        <script src="<%=request.getContextPath() %>/js/jquery.js" type="text/javascript"></script>
        <script src="<%=request.getContextPath() %>/js/framework.js" type="text/javascript"></script>
    </head>
    <body id="questionpage">
        <a class="accessibility" href="#question">Zur Frage springen</a>
        <%@ include file="header.jsp" %>
        
        <!-- round info -->
        <section role="main">
            <section id="roundinfo" aria-labelledby="roundinfoheading">
                <h2 id="roundinfoheading" class="accessibility">Spielerinformationen</h2>
                <div id="player1info">
                    <span id="player1name"><%= playerstatus.getPlayer0Name() %></span>
                    <ul class="playerroundsummary">
                    	<% for(int i = 0;i<Game.QUESTIONS_PER_ROUND;i++){
                    			if(playerstatus.getPlayer0Status()[i].equals(Status.CORRECT)) { %>
                    				<li><span class="accessibility">Frage <%=i+1%>:</span><span id="player1answer<%=i%>" class="correct">Richtig</span></li>	
                    			<% }else if (playerstatus.getPlayer0Status()[i].equals(Status.WRONG)) { %>
                    				<li><span class="accessibility">Frage <%=i+1%>:</span><span id="player1answer<%=i%>" class="incorrect">Falsch</span></li>			
                    			<% }else { %>
                    				<li><span class="accessibility">Frage <%=i+1%>:</span><span id="player1answer<%=i%>" class="unknown">Unbekannt</span></li>	
                    			<% }
                    	 	} %>
                    </ul>
                </div>
                <div id="player2info">
                    <span id="player2name"><%= playerstatus.getPlayer1Name() %></span>
                    <ul class="playerroundsummary">
							<% for(int i = 0;i<Game.QUESTIONS_PER_ROUND;i++){
                    			if(playerstatus.getPlayer1Status()[i].equals(Status.CORRECT)) { %>
                    				<li><span class="accessibility">Frage <%=i+1%>:</span><span id="player2answer<%=i%>" class="correct">Richtig</span></li>	
                    			<% }else if (playerstatus.getPlayer1Status()[i].equals(Status.WRONG)) { %>
                    				<li><span class="accessibility">Frage <%=i+1%>:</span><span id="player2answer<%=i%>" class="incorrect">Falsch</span></li>			
                    			<% }else { %>
                    				<li><span class="accessibility">Frage <%=i+1%>:</span><span id="player2answer<%=i%>" class="unknown">Unbekannt</span></li>	
                    			<% }
                    	 	} %>
                    </ul>
                </div>
                <div id="currentcategory"><span class="accessibility">Kategorie:</span><%= question.getCategory().getName() %></div>
            </section>
            
            <!-- Question -->
            <section id="question" aria-labelledby="questionheading">
                
                <form id="questionform" action="<%= playerstatus.getNextPage() %>" method="post">
                    <h2 id="questionheading" class="accessibility">Frage</h2>
                    <p id="questiontext"><%= question.getText() %></p>
                    <ul id="answers">
                        <% for(int i = 0;i<question.getAllChoices().size();i++){ %>
                            <li><input id="option<%=i+1 %>" type="checkbox" name="answer" value="<%=i %>" /><label for="option<%=i+1 %>"><%= question.getAllChoices().get(i).getText() %></label></li>
                        <% } %>
                    </ul>
                    <input type="hidden" name="action" value="<%= playerstatus.getNextPage() %>"/>
                    <input id="timeleftvalue" name="timeleftvalue" type="hidden" value="<%= question.getMaxTime() %>"/>
                    <input id="next" type="submit" value="weiter" accesskey="s"/>
                </form>
            </section>
            
            <section id="timer" aria-labelledby="timerheading">
                <h2 id="timerheading" class="accessibility">Timer</h2>
                <p><span id="timeleftlabel">Verbleibende Zeit:</span> <time id="timeleft">00:<%= question.getMaxTime() %></time></p>
                <meter id="timermeter" min="0" low="20" value="<%= question.getMaxTime() %>" max="<%= question.getMaxTime() %>"/>
            </section>
            
            <section id="lastgame">
                <p>Letztes Spiel: <time id="lastplayed">Nie</time></p>
            </section>
        </section>

        <!-- footer -->
        <footer role="contentinfo">© 2014 BIG Quiz</footer>
        
        <script type="text/javascript">
            //<![CDATA[
            
            // initialize time
            $(document).ready(function() {
                var maxtime = <%= question.getMaxTime() %>;
                var hiddenInput = $("#timeleftvalue");
                var meter = $("#timer meter");
                var timeleft = $("#timeleft");
                
                if(supportsLocalStorage()) {
                	var lastplayed = $("#lastplayed");
                	var storage = localStorage.getItem("lasttimeplayed");
                	if(storage!=null){
                		lastplayed.text(storage);	
                	}
                	var newDate = new Date();
                	localStorage.setItem("lasttimeplayed", newDate.getDate()+"."+newDate.getMonth()+"."+newDate.getFullYear()+" "+
                							newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds());	
                }
                
                hiddenInput.val(maxtime);
                meter.val(maxtime);
                meter.attr('max', maxtime);
                meter.attr('low', maxtime/100*20);
                timeleft.text(secToMMSS(maxtime));
            });
            
            // update time
            function timeStep() {
                var hiddenInput = $("#timeleftvalue");
                var meter = $("#timer meter");
                var timeleft = $("#timeleft");
                
                var value = $("#timeleftvalue").val();
                if(value > 0) {
                    value = value - 1;   
                }
                
                hiddenInput.val(value);
                meter.val(value);
                timeleft.text(secToMMSS(value));
                
                if(value <= 0) {
                    $('#questionform').submit();
                }
            }
            
            window.setInterval(timeStep, 1000);
            
            //]]>
        </script>
    </body>
</html>
